<template>
  <div class="tr-page-view">
    <dv-border-box-9>
      <div class="box">
        <div class="df-ac-jcsb">
          <div class="box-title">人员结构</div>
          <dv-decoration-9 style="width:.25rem;height:.25rem; position:relative;left:-0.5rem;" />
        </div>
        <div ref="echart" class="box-echart"></div>
      </div>
    </dv-border-box-9>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'TopRight',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    data (newV, oldV) {
      this.initChart()
    },
    deep: true
  },

  methods: {
    initChart () {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          top: '5%',
          bottom: '20%',
          left: 'center',
          textStyle: {
            color: '#fff'
          },
          pageTextStyle: {
            color: '#fff'
          },
          pageIconColor: 'rgba(50, 131, 186, 1)'
        },
        series: [
          {
            name: '人员结构',
            type: 'pie',
            radius: ['25%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
              normal: {
                label: {
                  textStyle: {
                    color: 'white',
                    fontSize: 14,
                    fontWeight: 'bolder'
                  }
                },
                labelLine: {
                  lineStyle: {
                    color: 'white'
                  }
                }
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ]
      }
      var myChart = echarts.init(this.$refs.echart)
      myChart.setOption(option)
    }
  }

}
</script>

<style lang="scss" scoped>
.tr-page-view {
  padding: 0.25rem;
  height: calc(100% - 0.5rem);
  .box {
    position: relative;
    height: 100%;
    .box-title {
      color: #1bb4f9;
      font-size: 0.225rem;
      padding: 0.25rem 0 0.2rem 0.625rem;
    }
    .box-echart {
      width: 90%;
      height: calc(100% - 0.55rem);
      margin: 0 auto;
    }
  }
}

</style>
